<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SEO渠道增加</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="x-body">
        <form action="" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                网站名称 <span class="x-red">*</span>
            </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                网址 <span class="x-red">*</span>
            </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">
                优化人
            </label>
                <div class="layui-input-inline">
                    <select id="department" name="department" class="valid" lay-filter="province">
                    <option value=""></option>
                    <option value="22">策划</option>
                    <option value="33">销售</option>
                    <option value="44">11</option>
                    <option value="55">44</option>
                    <option value="66">444</option>
                    <option value="77">888</option>
                </select>
                </div>
                <div class="layui-input-inline peopleDown">
                    <select id="people" name="people" class="valid">

                </select>
                </div>
            </div>
           <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit="" style="margin-left:110px">
                添加
            </button>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script>

        //    下拉框
        //监听。这是文档里的方法，平常js无法操作select
        layui.use(['layer', 'form'], function() {
            var layer = layui.layer,
                form = layui.form;
            form.on('select(province)', function(data) {
                //            console.log(data.elem); //得到select原始DOM对象
                //            console.log(data.value); //得到被选中的值
                var sec = data.value;
                var add; //联动select的数组
                if (sec == "22") {
                    add = new Array("wwww", "aaa");
                } else if (sec == "33") {
                    add = new Array("fasfaf", "fdgadgasdgs");
                } else if (sec == "44") {
                    add = new Array("陈达");
                } else if (sec == "55") {
                    add = new Array("dasdsadsadsfdg", "ukuykruk");
                } else if (sec == "66") {
                    add = new Array("资讯", "教育宝");
                }
                //联动效果的实现
                if (add != null) {
                    $("people").length = 0;
                    $("#people>option").remove();
                    for (var i = 0; i < add.length; i++) {
                        var ss = new Option();
                        ss.text = add[i].split()[0];
                        $("#people").append(ss);
                        //                    $("#yxDown").append(ss);
                        form.render('select');
                    }
                }
            });
        });

        layui.use('laydate', function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
    </script>

</body>

</html>